<template>
  <view>
    <view class="change-img">
      <view style="position: relative; width: 82px; text-align: center">
        <img
          :src="avatarImg"
          style="width: 82px; height: 82px; border-radius: 50%"
          @click="showPopup"
        />
        <view class="pai">
          <img src="../../static/camera.png" style="width:25px;height:25px" alt=""/>
        </view>
        <p>更换头像</p>
      </view>
    </view>
    <u-cell title="昵称" :value="nickName" is-link to="/modifyNickname"/>
    <u-cell title="手机号" value="18310930982" is-link/>
    <u-popup :show="show" class="box" @close="close">
      <view class="list-box">
        <u-upload
          v-model="onefilelist" :preview-image="false"
          capture="camera" accept="image/*" class="btn" @afterRead="afterReadOne">
          <view>拍照</view>
        </u-upload>
        <u-upload :preview-image="false" max-count="1" class="btn" @afterRead="afterRead" @beforeread="beforeReadTwo">
          <view>从相册选择</view>
        </u-upload>
        <view style="height:10px;background: #F7F7FA;"/>
        <view class="close" @click="close">取消</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { fileUpload } from '@/api/system/oss'
import avater from '../../static/avatar.png'

export default {
  name: 'UserInfo',
  data() {
    return {
      show: false,
      avatarImg: avater,
      nickName: '无尽夏',
      //   nickName: this.$store.nicknameStore.nickName,
      onefilelist: [],
      // twofilelist:[],
      maxSize: 10
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    close() {
      this.show = false
    },
    async afterReadOne() {
      console.log('照相机上传')
    },
    async beforeReadTwo(file) {
      console.log(file, 'beforeReadTwo...')
      // 此时可以自行将文件上传至服务器
      const isJPG =
        file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < this.maxSize
      console.log('大小', file.size)

      if (!isJPG) {
        alert('上传头像图片只能是 JPG/PNG 格式!')
        // Notify({ type: 'danger', message: '上传头像图片只能是 JPG/PNG 格式!' })
      }
      if (!isLt2M) {
        alert('上传图片大小不能超过' + this.maxSize + 'MB!')
        // Notify({ type: 'danger', message: '上传图片大小不能超过' + this.maxSize + 'MB!' })
      }
      return isJPG && isLt2M
    },
    async afterRead(file) {
      this.fileUpload(file)
    },
    fileUpload(data) {
      data.status = 'uploading'
      data.message = '上传中'
      fileUpload(data).then(
        (res) => {
          if (res.data.success) {
            this.avatarImg = res.data.data.filePath
            console.log('avatarImg------>', this.avatarImg)
            this.show = false
          } else {
            data.status = 'failed'
            data.message = res.data.message
          }
        },
        () => {
          data.status = 'failed'
          data.message = '上传失败'
        }
      )
    }
  }
}
</script>

<style scoped lang="scss">
.change-img {
  margin: 30px auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .pai {
    position: absolute;
    left: 68%;
    top: 48%;
  }

  p {
    margin: 0 !important;
  }
}

.box {
  :deep(.u-transition) {
    // height: 150px;
  }

  .list-box {
    height: 180px;

    .btn {
      height: 60px;
      align-items: center;

      :deep(.u-upload__wrap) {
        align-content: center;
      }
    }

    .close {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

//   .box .van-cell,.van-uploader{
//     height: 30%;
//     display: flex;
//     align-items: center;
//     font-size: 14px;
//     font-family: PingFangSC-Medium, PingFang SC;
//     font-weight: 500;
//     letter-spacing: 3px;
//     justify-content: center;
//     :deep(.van-cell__value){
//         text-align: center !important;
//         color: #252631 !important;
//     }
//   }
</style>
